<?php echo $this->Html->script('jquery-1.9.0.min'); ?>
<?php echo $this->Html->script('tiny_mce/tiny_mce'); ?>
<?php echo $this->Html->script('tiny_mce/tiny_mce_popup'); ?>
<?php echo $this->Html->css('jquery.tagsinput'); ?>
<title>File Browser</title>
<script type="text/javascript">
		var FileBrowserDialogue = {
				init : function () {
				    // Here goes your code for setting your custom things onLoad.
				},
				mySubmit : function (url) {
				    var URL = url;
				    var win = tinyMCEPopup.getWindowArg("window");

				    // insert information now
				    win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;

				    // are we an image browser
				    if (typeof(win.ImageDialog) != "undefined") {
				        // we are, so update image dimensions...
				        if (win.ImageDialog.getImageData)
				            win.ImageDialog.getImageData();

				        // ... and preview if necessary
				        if (win.ImageDialog.showPreviewImage)
				            win.ImageDialog.showPreviewImage(URL);
				    }

				    // close popup window
				    tinyMCEPopup.close();
				}
		}
		tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
		//get images of folder
		jQuery(document).ready(function(){
			<?php if(count($galleries) > 0){?>
				$.ajax({
				  type: "POST",
				  url: "<?php echo $this->Html->url(array('controller' => 'Galleries', 'action' => 'load_images'), true); ?>/<?php echo $galleries[0]['Gallery']['id'] ?>",
				  data: { folderId: <?php echo $galleries[0]['Gallery']['id'] ?> }
				}).done(function( msg ) {
					jQuery('.dialogl-file-col').html(msg);
				});
			<?php } ?>

			jQuery('.folder-li').click(function(){			
				jQuery('.selected').removeClass('selected');
				jQuery(this).addClass('selected');
				$.ajax({
				  type: "POST",
				  url: "<?php echo $this->Html->url(array('controller' => 'Galleries', 'action' => 'load_images'), true); ?>/" + this.id,
				  data: { folderId: this.id}
				}).done(function( msg ) {
					jQuery('.dialogl-file-col').html(msg);
				});
			});
		});
</script>
<style>
	.dialog-folder-col{
		float:left; width: 30%; height: 95%; background:#fff; padding: 10px; overflow: scroll;
	}
	.dialog-folder-col ul{margin:0px; padding: 0px;}
	.dialog-folder-col ul li{list-style:none; margin: 5px 0px; padding: 5px 5px 5px 16px; cursor:pointer;}
	.dialog-folder-col ul li:hover{background-color: #dadada !important;}
	.dialog-folder-col ul li{background: url(/img/folder-16.png) no-repeat left; }
	.dialog-folder-col ul li.selected{background: #b89e70 url(/img/folder-16.png) no-repeat left;}
	.dialogl-file-col{float:right; width: 60%; height: 95%; background: #fff; padding: 10px; overflow:scroll;}
	.img-thumb-dialog{float: left; width: 80px; margin: 5px;}
	.img-thumb-dialog img{border: 1px solid #dadada; cursor:pointer;}
	.img-thumb-dialog img:hover{border: 1px solid #0894A5;}
</style>

<div>
	<div class='dialog-folder-col'>
		<ul>
			<?php foreach($galleries as $i=>$gallery): ?>
				<li class="folder-li <?php echo $i == 0 ? 'selected' : '' ?>"  id="<?php echo $gallery['Gallery']['id'] ?>">
					<?php echo $gallery['Gallery']['name']  ?>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
	<div class='dialogl-file-col'>
	</div>
</div>

